[feat] Build nav column and header #51

kylezryr · 2024-11-22T08:55:26Z

What's new in this PR 🧑‍🌾

Description

Created NavColumn and Header component under NavSystem
Added links to View Plants and Planting Timeline pages in the NavColumn with conditional styling
Show different icons/buttons in Header and NavColumn depending on whether user is logged in and/or onboarded

Screenshots

Previously:

Most Updated:

Not Logged In

Logged In, Not Onboarded

Logged In, Onboarded

How to review

Check that header displays on every page except /onboarding
Check that pressing the nav links in the NavColumn route you to the correct page with the correct styling
Check that login / signup / sign out buttons work

Next steps

Styling for transitions when opening/closing NavColumn?
- See B&R's MenuBar transitions
Waiting on designs for the header when user is not logged in/hasn't completed onboarding
Consolidate Button Styles in components/Button.tsx, e.g.
- HamburgerButton
- LoginButton/SignUp Button -- they're really the same button, but with diff colors.
- SignOut/Onboarding Button -- they're really the same button, but with diff colors.
use CONFIG throughout the app
maybe throw/catch an error for signOut

Relevant links

Online sources

Related PRs

CC: @ccatherinetan

ccatherinetan

omfg it's so amazing ty kyle! i didn't get to go thru all the styles very in depth (i might submit another review shortly) but it's looking great!

the main thing is to map UserTypeEnum to the actual string we want to display (see my comment)
destructure StyledComponents props (and make sure they start with $)

components/Header/index.tsx

ccatherinetan · 2024-11-26T08:57:20Z

components/NavColumn/index.tsx

+  const handleSignOut = () => {
+    router.push(CONFIG.login);
+    onClose();
+    signOut();


note: we might need to add additional error catching here in the future, but this is great!

ccatherinetan · 2024-11-26T09:02:27Z

components/NavColumn/styles.ts

+export const HamburgerIcon = styled(Icon)`
+  fill: ${COLORS.shrub};
+`;


hm... i think kevin was able to do this before in the Review Onboarding PR - i'll try to link it soon

ccatherinetan · 2024-11-26T09:11:05Z

lib/icons.tsx

+      </defs>
+    </svg>
+  ),
+  logo: (


we might consider importing this as a png rather than an svg if the file is large but we can come back to this!

components/Header/index.tsx

components/NavColumnItem/index.tsx

components/NavColumnItem/styles.ts

components/NavColumn/styles.ts

ccatherinetan

additional changes

check profileReady and profileData → if not profileReady have a loading style in the bottom half of the nav column
if not profileData, show the Go To Onboarding button

ccatherinetan · 2024-12-07T19:17:13Z

components/Header/index.tsx

+      <HamburgerButton onClick={onNavColumnClick}>
+        <Icon type="hamburger" />
+      </HamburgerButton>
+      <Link href="/">


this link can also be added to CONFIG!

home: "/",

lib/configs.ts

ccatherinetan · 2024-12-07T23:57:28Z

components/Header/index.tsx

+        )
+      ) : (
+        // display login link if user is not logged in
+        <Link href={CONFIG.login}>Login/Sign Up</Link>


Maybe just say Login here, since it's not routing to Signup.
Or, you can create another link with Sign Up.
maybe the gap between the 2 links can be 8px

ccatherinetan · 2024-12-08T00:09:48Z

components/NavColumn/index.tsx

+                    <H3 $color={COLORS.shrub} style={{ fontWeight: 300 }}>
+                      Your Account
+                    </H3>
+                    <H4 $color={COLORS.shrub} style={{ fontWeight: 300 }}>
+                      {formatUserType(profileData?.user_type as UserTypeEnum)}
+                    </H4>


Your Account should be H4 and User Type should be P3
also let's not use style prop if possible. instead use the $fontWeight prop directly

ccatherinetan · 2024-12-08T06:44:51Z

components/Header/index.tsx

+
+  return (
+    <Container>
+      <HamburgerButton onClick={onNavColumnClick}>


we might want to eventually consolidate all button styles and include them in components/Button.tsx. in this case, we could use a button that basically has no background, outline etc.

ccatherinetan

tysm kyle! it's ready to merge!

next steps: consolidate buttons styles, e.g.

HamburgerButton
LoginButton/SignUp Button -- they're really the same button, but with diff colors.
SignOut/Onboarding Button -- they're really the same button, but with diff colors.

ccatherinetan · 2024-12-08T06:45:50Z

components/NavColumn/styles.ts

+  font-size: 0.875rem;
+`;
+
+export const OnboardingButton = styled(Link)`


same here, eventually we can consolidate the button styles in component/Button.tsx so that they can be reusable! this big button style is used quite frequently in the app

kylezryr force-pushed the 47-build-nav-column-and-header branch from 6c8b7f8 to 064f6e8 Compare November 24, 2024 05:18

kylezryr marked this pull request as ready for review November 24, 2024 06:21

kylezryr linked an issue Nov 24, 2024 that may be closed by this pull request

Build Nav Column and Header #47

Closed

ccatherinetan reviewed Nov 27, 2024

View reviewed changes

kylezryr force-pushed the 47-build-nav-column-and-header branch from ce26e31 to 6660055 Compare December 3, 2024 18:30

ccatherinetan reviewed Dec 7, 2024

View reviewed changes

kylezryr added 13 commits December 7, 2024 15:04

created NavColumn, Header, and NavSystem components

d5ec9b5

added more routes, navcolumn styling

27e6772

added NavColumnItems, more styling for NavColumn

521e7c3

added conditional rendering depending on logged in

b06272f

fix lint errors

d395efe

remove duplicate plant and calendar icons and run prettier

649119c

styling changes to NavColumn and Header

c97ec78

added checks for onboarding status

8f30101

fix lint error

c8a2dbd

add profileData to NavColumn

560ec30

destructure styled props and iterating on feedback

4035e4e

add home to config and add go to onboarding button

aabaf62

rename formatusertype

314d8f9

kylezryr force-pushed the 47-build-nav-column-and-header branch from df551a0 to 314d8f9 Compare December 7, 2024 23:46

ccatherinetan reviewed Dec 7, 2024

View reviewed changes

lib/configs.ts Show resolved Hide resolved

ccatherinetan reviewed Dec 7, 2024

View reviewed changes

remove isLoggedIn prop from NavColumn and Header

5857e04

ccatherinetan reviewed Dec 8, 2024

View reviewed changes

kylezryr and others added 5 commits December 7, 2024 16:16

fix lint error

0d59cb8

lint error

a456ad8

organize AuthOrProfileButtons in NavColumn

1da3ba6

fix sproutLight color

7be8512

refactor icon logic in Header

c90bede

ccatherinetan reviewed Dec 8, 2024

View reviewed changes

ccatherinetan added 2 commits December 7, 2024 22:47

await signOut

4207588

make NavColumnItem more clickable

c4b3720

ccatherinetan reviewed Dec 8, 2024

View reviewed changes

ccatherinetan merged commit 77d2fa2 into main Dec 8, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat] Build nav column and header #51

[feat] Build nav column and header #51

kylezryr commented Nov 22, 2024 •

edited by ccatherinetan

Loading

ccatherinetan left a comment •

edited

Loading

ccatherinetan Nov 26, 2024

ccatherinetan Nov 26, 2024

ccatherinetan Nov 26, 2024

ccatherinetan left a comment

ccatherinetan Dec 7, 2024

ccatherinetan Dec 7, 2024

ccatherinetan Dec 8, 2024

ccatherinetan Dec 8, 2024

ccatherinetan left a comment

ccatherinetan Dec 8, 2024

[feat] Build nav column and header #51

[feat] Build nav column and header #51

Conversation

kylezryr commented Nov 22, 2024 • edited by ccatherinetan Loading

What's new in this PR 🧑‍🌾

Description

Screenshots

How to review

Next steps

Relevant links

Online sources

Related PRs

ccatherinetan left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ccatherinetan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ccatherinetan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kylezryr commented Nov 22, 2024 •

edited by ccatherinetan

Loading

ccatherinetan left a comment •

edited

Loading